<template>
  <div class="comment-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>评论管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-table
        :data="commentData"
        style="width: 100%">
        <el-table-column
          prop="title"
          label="标题"
        >
        </el-table-column>
        <el-table-column
          prop="total_comment_count"
          label="总评论数"
        >
        </el-table-column>
        <el-table-column
          prop="fans_comment_count"
          label="粉丝评论数"
        >
        </el-table-column>
        <el-table-column
          prop="comment_status"
          label="状态"
        >
          <template slot-scope="scope">
            {{ scope.row.comment_status ? '正常' : '关闭' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="comment_status"
          label="操作"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.comment_status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :disabled="scope.row.isLoading"
              @click.native="onStatusChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change = "onSizeChange"
        @current-change="onCurrentChange"
        :current-page.sync="page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="commentCount">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import { comments, commentStatus } from '@/api/comment'
export default {
  name: 'appComment',
  data () {
    return {
      // 评论列表
      commentData: [],
      // 评论总数
      commentCount: null,
      // 当前页
      page: 1,
      // 每页显示大小
      pageSize: 10
    }
  },
  methods: {
    // 获取评论列表
    async commentsLists (page, pageSize) {
      // comments(page-当前页,per-page-每页多少条数据)
      const res = await comments(page, pageSize)
      const { results } = res.data.data
      results.forEach(comment => {
        comment.isLoading = false
      })
      this.commentData = results
      this.commentCount = res.data.data.total_count
    },
    // 分页点击事件
    onCurrentChange (page) {
      this.commentsLists(page)
    },
    // 分页大小筛选事件
    onSizeChange (pageSize) {
      this.commentsLists(this.page = 1, pageSize)
    },
    // 切换评论状态
    async onStatusChange (comment) {
      try {
        // 切换状态时候,讲滑动按钮禁用
        comment.isLoading = true
        // commentStatus(commentId-评论id, data(allow_comment)-评论状态)
        await commentStatus(comment.id.toString(), {
          allow_comment: comment.comment_status
        })

        // 服务器端返回信息,打开互动按钮
        comment.isLoading = false
      } catch (err) {
        return Promise.reject(err)
      }
    }
  },
  created () {
    this.commentsLists(this.page, this.pageSize)
  }
}
</script>
<style lang="less">
.comment-container{
  .box-card{
    .el-table{
      margin-bottom: 20px;
    }
  }
}
</style>
